<template>
  <div>
    <h2>购物车</h2>
    <!--后退  -->
    <Back></Back>
    <!--购物车列表  -->
    <CarList></CarList>
    <!-- vuex的示例 -->
    <h5>vuex中使用模块的示例</h5>
    <hr/>
    <p>moduleA</p>
    <p>a.count:{{a.count}}</p>
    <p>a.msg:{{a.msg}}</p>
    <input type="button" value="修改模块里的数据count" @click="addCount">
    <p>moduleB：todolist</p>
    <ul>
      <li v-for="item in moduleB.todoList">
        <input type="checkbox" v-model="item.isFinished" >
        <span>任务名:{{item.desc}}</span>        
      </li>
    </ul>
    <input type="button" value="添加任务" @click="addTodo">

    <!--底部  -->
    <FooterBar></FooterBar>
  </div>
</template>

<script>
import Back from "../components/Back.vue";
import CarList from "../components/CarList.vue";
import FooterBar from "@/components/FooterBar.vue";
import {mapState,mapMutations} from "vuex";

export default {
    name:"ShoppingCar",
    components:{
        Back,CarList,FooterBar
    },
    computed:{
      ...mapState(["age","a","moduleB"])
    },
    created(){
      console.log("shoppingCar组件：this.$store",this.$store);
    },
    methods:{
      // mapMutation映射模块里的mutation:
      //  mapMutations({"方法名","模块名/mutation的名字"})
      ...mapMutations({
        incCount:"a/incCount",
        decCount:"a/decCount",
        mAddTodo:"moduleB/mAddTodo"
      }),

      addCount(){
        // this.$store.commit("a/incCount");
        this.incCount();
      },
      addTodo(){
        this.mAddTodo({
          data:{
            desc:"写html",
            isFinished:false
          }
        });
        // this.$store.commit({
        //   type:"moduleB/mAddTodo",
        //   data:{
        //     desc:"写html",
        //     isFinished:false
        //   }
        // });
      }
    }
    // 组件内部的守卫
    // beforeRouteEnter(to,from,next){
    //   // 在组件内部的前置守卫里，没法获取到组件的this。
    //   if(!sessionStorage.getItem("username")){
    //       next("/Login?path="+to.path);
    //   }else{
    //       next()
    //   }
    // }

}
</script>

<style>

</style>